<template>
  <div class="modal">
    <div class="fast-choose-phone">
      <div class="title border-bottom">
        快捷选号
      </div>
      <div class="btns">
        <slot></slot>
      </div>
      <div class="operations border-top">
        <div class="reset btn button-unselected">重置</div>
        <div class="cancle btn button-unselected">取消</div>
        <div class="confirm btn button-selected" @click="handleConfirm">确认</div>
      </div>
    </div>
  </div>
</template>

<script>
// import fastchooseColor from './common/fastchoose-color'
import { mapGetters } from 'vuex'
export default {
  components: {
    // fastchooseColor
  },
  props: {
    buttons: {
      type: Array,
      default: function() {
        return [
          {
            id: 1,
            btnNames: [
              { name: '红', color: 'red', selected: false },
              { name:'绿', color: 'green', selected: false }, 
              { name: '蓝', color: 'blue', selected: false }]
          },
          {
            id: 2,
            btnNames: [
              {name: '大', selected: false}, 
              {name: '小', selected: false}, 
              {name: '单', selected: false}, 
              {name: '双', selected: false}
            ]
          },
          {
            id: 3,
            btnNames: [
              {name: '合单', selected: false}, 
              {name: '合双', selected: false},
            ]
          },
          {
            id: 4,
            btnNames: [
              {name: '鼠', selected: false}, 
              {name: '牛', selected: false}, 
              {name: '虎', selected: false}, 
              {name: '兔', selected: false},
              {name: '龙', selected: false}, 
              {name: '蛇', selected: false}, 
              {name: '马', selected: false}, 
              {name: '羊', selected: false},
              {name: '猴', selected: false}, 
              {name: '鸡', selected: false}, 
              {name: '狗', selected: false}, 
              {name: '猪', selected: false},
            ]
          }
        ]
      }
    }
  },
  methods: {
    handleConfirm() {
      this.$emit('click')
    }
  },
  
}
</script>
 
<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'

.modal 
  position fixed 
  top 0 
  left 0
  right 0
  bottom 0 
  background rgba($color-theme-dark, 0.7)
  z-index 100
  .fast-choose-phone 
    position fixed 
    left 0
    right 0
    bottom 0 
    background #fff
    border-top-left-radius 15px
    border-top-right-radius 15px
    z-index 100
    width 100%
    overflow hidden
    .title 
      height 48px 
      line-height 48px
      text-align center
      box-sizing border-box 
      padding 0 24px
    .btns 
      box-sizing border-box 
      padding 5px 24px
      .btn-row 
        display flex
        flex-wrap wrap
        justify-content space-between
        .btn-item 
          width auto 
          min-width 74px
          height 40px 
          line-height 40px 
          text-align center
          margin 5px 0
          &.active 
            background $color-theme-dark
            color #fff
    .operations 
      box-sizing border-box 
      padding 10px 24px
      position relative
      left 0 
      right 0
      bottom 0
      display flex 
      justify-content space-between
      .btn 
        width calc((100% - 30px) / 3)
        height 35px
        line-height 35px
        text-align center
</style>